<template>
  <div class="user-list">
    <de-container v-if="type == 'list'" class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :data="tableData"
        :option="tableOption"
        :page.sync="page"
        :search.sync="searchForm"
        :table-loading="tableLoading"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @keyup.enter="onSearchChange"
        @search-reset="onSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
      >
        <template slot="menuLeft" slot-scope="{ size, row }">
          <el-button :size="size" icon="el-icon-plus" type="primary" @click="onClick(row, 'add')"> 新增 </el-button>
          <el-button :disabled="selection.length <= 0" :size="size" icon="el-icon-delete" @click="onBatchDeleteClick">
            批量删除
          </el-button>
        </template>
        <template slot="createdAtSearch" slot-scope="{ size }">
          <el-date-picker
            v-model="daterange"
            :size="size"
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
            @change="onDateRangeChange"
          >
          </el-date-picker>
        </template>
        <template slot="menu" slot-scope="{ size, row }">
          <el-button :size="size" icon="el-icon-view" type="text" @click="onClick(row, 'view')"> 详情 </el-button>
          <el-button :size="size" icon="el-icon-edit" type="text" @click="onClick(row, 'edit')"> 编辑 </el-button>
          <el-button :size="size" icon="el-icon-delete" type="text" @click="onDelete(row)"> 删除 </el-button>
        </template>
      </avue-crud>
    </de-container>
    <Detail v-if="type != 'list'" :template-id="templateId" :type="type" @back="onBack"></Detail>
  </div>
</template>

<script>
import { requesInfoTemplateDelete, requestInfoTemplatePage } from '@/api'
import ListMixin from '@/utils/mixins/list-mixin'
import Detail from './components/detail.vue'
import DeContainer from '@/components/dataease/DeContainer.vue'

export default {
  components: { DeContainer, Detail },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestInfoTemplatePage,
      tableOption: {
        menuWidth: 200,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        index: true,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        column: [
          {
            label: '模板编码',
            prop: 'templateCode',
            search: true,
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
          },
          {
            label: '模板名称',
            prop: 'templateName',
            search: true,
            span: 12,
            align: 'left',
            showColumn: false,
            overHidden: true,
          },
          {
            label: '发送渠道',
            prop: 'sendWay',
            type: 'select',
            search: true,
            width: 160,
            dicData: [
              {
                label: '短信',
                value: 'sms',
              },
              {
                label: '邮件',
                value: 'email',
              },
              {
                label: '站内信',
                value: 'notice',
              },
              {
                label: '飞书',
                value: 'feishu_robot',
              },
            ],
            overHidden: true,
          },
          // {
          //   label: '创建人',
          //   prop: 'createdBy',
          //   span: 12,
          //   align: 'left',
          //   showColumn: false,
          //   overHidden: true,
          // },
          // {
          //   label: '创建时间',
          //   prop: 'createdAt',
          //   span: 12,
          //   align: 'left',
          //   showColumn: false,
          //   overHidden: true,
          //   search: false,
          //   searchSpan: 8,
          //   searchslot: true,
          //   editDisplay: false,
          //   addDisplay: false,
          //   viewDisplay: false,
          // },
          // {
          //   label: '修改人',
          //   prop: 'createdBy',
          //   span: 12,
          //   align: 'left',
          //   showColumn: false,
          //   overHidden: true,
          // },
          // {
          //   label: '修改时间',
          //   prop: 'updateBy',
          //   span: 12,
          //   align: 'left',
          //   showColumn: false,
          //   overHidden: true,
          // },
        ],
      },
      type: 'list',
      templateId: '',
      currentRow: null,
      title: '新增',
      addDialogVisible: false,
      selectList: {},
    }
  },
  methods: {
    onBack() {
      this.type = 'list'
      this.templateId = ''
      this.currentRow = null
      this.onSearchReset()
    },
    onClick(data, type) {
      this.type = type
      this.templateId = data.id
    },
    onDelete(row) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          requesInfoTemplateDelete({ id: row.id }).then((res) => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: res.message,
              })
              this.onSearchReset()
            } else {
              this.$message({
                type: 'error',
                message: res.message,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style lang="scss"></style>
